<template>
    <div>
        <Header />
        <div class="content">
            
            <div class="top">
                <div style="margin-bottom:24px;">
                    <p class="title">职业百科</p>
                    <p class="info">职业百科词条已收录 <span class="number">884</span> 个职业</p>
                    <p class="desc">快速了解不同职业的晋升之路、薪资待遇，更有转行数据及热议问答，助你轻松入行。</p>
                </div>
                <div style="display:flex;">
                    <div style="width:75%;flex:1;">
                        <input class="el-input__inner" placeholder="请输入内容">
                    </div>
                    <div>
                        <el-button type="primary">点击查询</el-button>
                    
                    </div>
                </div>
            </div>
            <div class="listcontent">
                <h2 class="Ltitle">职业榜单</h2>
                <div class="list">
                    <div class="item" v-for="item in list" :key="item.id" >
                        <div class="titlebox">
                            <img 
                            :src="item.src" alt="" draggable="false" data-v-9a848d56="">
                            <p style="">{{item.title}}</p>
                        </div>
                        <div class="infobox">
                            <div class="infobox-item" v-for="obj in item.info" :key="obj.id">
                                <div class="infobox-item-number">{{obj.id}}</div>
                                <div class="infobox-item-desc">
                                    <div class="infobox-item-titie">{{obj.major}}</div>
                                    <div class="infobox-item-innerdesc">{{obj.desc}}</div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
                
            </div>
            
        </div>

    </div>
</template>

<script>
import Header from '../components/common/Header'
export default {
    data(){
        return{
            input: '',
            list:[
                {   
                    id:1,
                    title:'热搜职业榜',
                    src:"https://img.bosszhipin.com/beijin/cms/fafc9b56d5f26d448950245d547bb032fbcf1fe2146e01096e1e8f8db8373f697ccc7c26441c49fe99a47d3e6b626989.png",
                    info:[
                        {   
                            id:1,
                            major:'行政专员',
                            desc:'维护组织稳定，提供后勤保障，是业务方的后备军。'
                        },
                        {
                            id:2,
                            major:'音乐教师',
                            desc:'懂音律，擅沟通，让学员都能 get 音乐的美妙！'
                        },
                        {
                            id:3,
                            major:'电话销售',
                            desc:'了解产品卖点，还能舌灿莲花，打通电话就能促进订单成交！'
                        },
                        {
                            id:4,
                            major:'策略运营',
                            desc:'根据不同用户的特征，筹划不同的运营手段，运用策略拉新促活，Ta 最在行！'
                        },
                    ]
                },
                {
                    id:2,
                    title:'薪酬涨幅榜',
                    src:'https://img.bosszhipin.com/beijin/cms/b8186d5424740bcec6b8dd2acde7d884fbcf1fe2146e01096e1e8f8db8373f69134220582eb844e69dbd08b2c1b0d41d.png',
                    info:[
                        {   
                            id:1,
                            major:'审计师',
                            desc:'依照法律法规，对各级政府、金融机构、企事业单位的财政、财务收支、重大项目及其他经济活动进行事前和事后审查、鉴证、评价的专业人员。'
                        },
                        {
                            id:2,
                            major:'仓库经理',
                            desc:'组织调度人员与设备，完成物流收发货作业，并负责仓库日常管理的人员。'
                        },
                        {
                            id:3,
                            major:'4S 店店长',
                            desc:'负责汽车销售和维修服务门店日常事务管理工作，带领门店完成业绩指标的管理人员。'
                        },
                        {
                            id:4,
                            major:'汽车电子工程师',
                            desc:'负责设计和实施汽车电子硬件、软件开发、生产工艺及生产流程，为汽车电子系统和设备提供技术支持的工程师。'
                        },
                    ] 
                },
                {
                    id:3,
                    title:'新增词条榜',
                    src:'https://img.bosszhipin.com/beijin/cms/e4659ee42402c2f0c1adebe316e05477fbcf1fe2146e01096e1e8f8db8373f697bb4ef362574452791fd6cbb7433ed11.png',
                    info:[
                        {   
                            id:1,
                            major:'防疫志愿者',
                            desc:'在新冠肺炎疫情期间，在各防疫地点自愿协助完成相关防疫工作的人员，一般需要向社区报名申请'
                        },
                        {
                            id:2,
                            major:'责任编辑',
                            desc:'在出版单位中，为保证出版物的质量符合出版要求，专门负责对拟出版的作品内容进行全面审核和加工整理，并在出版物上署名的专业人员。'
                        },
                        {
                            id:3,
                            major:'商务渠道',
                            desc:'通过参与客户合作谈判、制定协议、制定商务解决方案，开拓客户渠道和资源，帮公司与客户建立深度合作关系的人员。'
                        },
                        {
                            id:4,
                            major:'人力资源顾问',
                            desc:'是帮助企业建立或完善公司的人力资源系统，包括建立薪酬与福利系统、绩效考核系统，招聘与培训系统等流程体系，提升企业人力资源管理效率，使企业的人力资源管理规范化的人员。'
                        },
                    ] 
                },
                {
                    id:4,
                    title:'新兴职业榜',
                    src: 'https://img.bosszhipin.com/beijin/cms/f0392d80b4564896fe3d2587d6a5ec96fbcf1fe2146e01096e1e8f8db8373f699a52cda6ce7d4ea9a2106a1ed6cc97ca.png',
                    info:[
                        {   
                            id:1,
                            major:'电竞解说员',
                            desc:'负责电子竞技比赛转播的解说及介绍的专业人员。电竞解说通常由2到3位解说员共同工作，一人承担画面描述、一人承担评论和分析。'
                        },
                        {
                            id:2,
                            major:'电脑急救师',
                            desc:'与一般的电脑技术维修人员不同，电脑急救师不仅能对电脑硬件进行维护，还能对软件故障进行检测和维修，并进行准确的数据恢复。当电脑病毒发作时，电脑急救师可以在很短的时间里，对病毒进行检测和控制。'
                        },
                        {
                            id:3,
                            major:'夜晚陪跑员',
                            desc:'陪伴或训练跑步爱好者跑步的人员。'
                        },
                        {
                            id:4,
                            major:'农民直播销售员',
                            desc:'应用网络直播进行销售农产品及周边的农民主播。'
                        },
                    ] 
                }
            ]
        }
    },
    components: {
        Header
    }
}
</script>

<style scoped>
.content{
  margin: 0 auto;
  width: 1300px;
  padding: 20px;
  box-sizing: border-box;
  /* text-align: center; */
}
.title{
    font-size: 32px;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    color: #12141a;
    line-height: 45px;
    margin-bottom: 25px;
    text-align: center;
}
.info{
    font-size: 18px;
    font-weight: 500;
    color: #12141a;
    line-height: 25px;
    margin-bottom: 8px;
    text-align: center;
}
.number{
color: #00b8bf;
    margin: 0 8px;
}
.desc{
    font-size: 14px;
    font-weight: 400;
    color: #737680;
    line-height: 28px;
    text-align: center;
}
.el-button{
    height: 50px;
    width: 120px;
    border-radius: 0 8px 8px 0;
    background: #00b8bf;
    border: none;
    cursor: pointer;
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    box-sizing: border-box;
    line-height: 28px;
    position: relative;
    z-index: 10;
}
.el-input__inner {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 50px;
    background: #fff;
    border-radius: 8px 0 0 8px;
    border: 1px solid #e6e8eb;
    font-size: 18px;
    color: #12141a;
    font-weight: 400;
    /* float: left; */
    line-height: 25px;
    padding: 0 24px;
    position: relative;
    z-index: 10;
    margin-bottom: 24px;
}

.listcontent{
background: #fff;
    border-radius: 8px;
    padding: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    /* flex-direction: column; */
}
.list{
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    /* flex-direction: column; */
}
.Ltitle{
    font-size: 24px;
    font-weight: 600;
    color: #12141a;
    line-height: 33px;
    /* margin-bottom: 24px; */
}
.item{
    width: 270px;
    height: 369px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e8e9eb;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; 
    margin-right: 20px;
}
.titlebox{
    display: flex;
    padding: 20px 16px 8px;
}
.titlebox img{
    width: 22px;
    height: 23px;
    margin-right: 8px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: relative;
    top: -1px;
}
.titlebox p{
    font-size: 20px;
    font-weight: 600;
    color: #12141a;
    line-height: 28px;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
}
.infobox{
    display: flex;
    flex-direction: column;
}
.infobox-item{
    display: flex;    
    padding: 8px 0 8px 22px;
}
.infobox-item-number{
    flex: 0.2;
    text-align: center;
}
.infobox-item-desc{
    flex: 0.8;
}
.infobox-item-innerdesc{
    font-size: 13px;
    font-weight: 400;
    color: #a2a5b3;
    line-height: 18px;
    margin-top: 4px;
    padding-right: 24px;
    display: -webkit-box;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: 36px;
}
</style>